<template>
	<view class="car">

		<view class="container">
			<view class="car-list">
				<view class="list-item">
					<view class="right">
						<view class="goods-img">
							<image src="/static/img/1/39.png" mode="aspectFill"></image>
						</view>
						<view class="info">
							<text class="name">智利加力果 12个装，进口新鲜...</text>
							<text class="price">拼团：¥39.90  <text class="del">¥69.90</text></text>
							<view class="option">
								<text class="tap">3人团</text>
								<text class="hui">已拼单100</text>
								<text class="stock">库存紧张</text>
								<uni-number-box class="step" :min="1" :max="20" :value="20" :index="1" @eventChange="numberChange"></uni-number-box>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="ping" >
				<view class="h2">
					还差2人拼团成功，仅剩 22:46:45 <text>9</text>
				</view>
				<view class="pingk">
					<view class="top">
						<view class="kbox">
							<view class="tito">
								团长
							</view>
							<view class="topk">
								<image src="/static/img/2/2-5.png" mode="scaleToFill"></image>
							</view>
						</view>
						<view class="kbox">
							<view class="topk">
								<image src="/static/img/2/2-5.png" mode="scaleToFill"></image>
							</view>
						</view>
					</view>
					<view class="ps">
						开团后可邀请好友
					</view>
					<view class="gank">
						
						<view class="ga">
							<image src="/static/img/1/face1.png" mode="widthFix"></image>
							<text>发起拼团</text>
						</view>
						<view class="bb"></view>
						<view class="ga">
							<image src="/static/img/1/face1.png" mode="widthFix"></image>
						</view>
						<view class="bb"></view>
						<view class="ga">
							<image src="/static/img/1/face1.png" mode="widthFix"></image>
							<image src="/static/img/1/face2.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="car-list">
				<view class="list-item">
					<view class="right">
						<view class="goods-img">
							<image src="/static/img/1/39.png" mode="aspectFill"></image>
						</view>
						<view class="info">
							<text class="name">智利加力果 12个装，进口新鲜...</text>
							<text class="price">拼团：¥39.90  <text class="del">¥69.90</text></text>
							<view class="option">
								<text class="tap">3人团</text>
								<text class="hui">已拼单100</text>
								<text class="stock">库存紧张</text>
								<uni-number-box class="step" :min="1" :max="20" :value="20" :index="1" @eventChange="numberChange"></uni-number-box>
							</view>
						</view>
					</view>
				</view>
			<view class="list-item">
				<view class="right">
					<view class="goods-img">
						<image src="/static/img/1/39.png" mode="aspectFill"></image>
					</view>
					<view class="info">
						<text class="name">智利加力果 12个装，进口新鲜...</text>
						<text class="price">拼团：¥39.90  <text class="del">¥69.90</text></text>
						<view class="option">
							<text class="tap">3人团</text>
							<text class="hui">已拼单100</text>
							<text class="stock">库存紧张</text>
							<uni-number-box class="step" :min="1" :max="20" :value="20" :index="1" @eventChange="numberChange"></uni-number-box>
						</view>
					</view>
				</view>
			</view>
						
			</view>
			
		</view>
		<!-- 分享 -->
		<share 
			ref="share" 
			:contentHeight="900"
			:shareList="shareList"
		></share>
	</view>
</template>

<script>
	import uniNumberBox from '@/components/uni-number-box.vue'
	import share from '@/components/share';

	export default {
		components: {
			uniNumberBox,
			share
		},
		data() {
			return {
				empty: false, //空白页现实  true|false
				shareList: []
			}
		},
		async onLoad(){
			
		
			this.shareList = await this.$api.json('shareList');
		},
		methods: {
			numberChange() {

			},
			add(){
				uni.navigateTo({
					url:`/pages/address/index`
				})
			},
			invoice(){
				uni.navigateTo({
					url:`/pages/invoice/add`
				})
			},
			topay(){
				uni.navigateTo({
					url:`/pages/order/payway`
				})
			}
		},
		onNavigationBarButtonTap(e) {
			// console.log(e)
			
			this.$refs.share.toggleMask();
			
				
		}


	}
</script>

<style lang="scss">
	.pingk{
		padding: 30rpx;
		text-align: center;
	}
	.gank{
		width: calc(524rpx + 80rpx);
		margin: auto;
		font-size:24rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(240,64,111,1);
		margin-top: 30rpx;
		position: relative;
		padding-bottom: 45rpx;
		/* line-height: 40rpx; */
	}
	.gank .ga{
		display: inline-block;
		position: relative;
		vertical-align: middle;
		
	}
	.gank .ga text{
		display: block;
		position: absolute;
		top: 50rpx;
		width: 100rpx;
		left: -30rpx;
		margin: auto;
	}
	.gank .bb{
		width:220rpx;
		display: inline-block;
		height: 1px;
		background: #F0406F;
		vertical-align: middle;
	}
	/* .gank .ga:nth-child(1){
		text-align: left;
	}
	.gank .ga:nth-child(3){
		text-align: right;
	} */
	.gank image{
		display: inline-block;
		vertical-align: middle;
		width:40rpx;
		height:40rpx;
	}
	.pingk .ps{
		font-size:24rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(51,51,51,1);
		margin-top: 15rpx;
	}
	.pingk .kbox{
			width:105rpx;
			display: inline-block;
			vertical-align: bottom;
		margin-left: 7rpx;
		margin-right: 7rpx;
	}
	.pingk .kbox .tito{
		display: block;
		margin: auto;
		width:56rpx;
		height:23rpx;
		background:rgba(240,64,111,1);
		border-radius:12rpx;
		text-align: center;
		font-size:20rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(255,255,255,1);
		line-height: 23rpx;
		margin-bottom: 10rpx;
	}
	.pingk .topk{
		display:block;
		vertical-align: middle;
		width:105rpx;
		height:105rpx;
		border:1px dashed rgba(240,64,111,1);
		border-radius:50%;
		overflow: hidden;
	}
	.pingk .topk image{
		display: block;
		width: 100%;
	}
	.ping{
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		background: #fff;
	}
	.ping .h2{
		height:60rpx;
		background:rgba(240,64,111,1);
		text-align: center;
		font-size:24rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(255,255,255,1);
		line-height: 60rpx;
	}
	.ping .h2 text{
		display: inline-block;
		width:28rpx;
		height:28rpx;
		background:rgba(255,255,255,1);
		border-radius:14rpx;
		text-align: center;
		line-height: 28rpx;
		font-size:18rpx;
		color: #F0406F;
		margin-left: 5rpx;
	}
	page {
		background: #f5f5f5;
	}

	.car {

		.container {
			padding-bottom: 134upx;

			.c-row {
				display: flex;
				align-items: center;
				padding: 35upx 25upx;
				position: relative;
				background: #fff;
				margin-bottom: 10upx;

				.tit {
					width: 140upx;
					font-size: 27upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);

				}

				.icon-you {
					flex: 1;
					text-align: right;
				}

			}

			.i-header {
				width: 100%;
				height: 10upx;
				display: block;
			}

			.address {
				padding: 28upx 23upx;
				height: 143upx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0upx 0upx 16upx 0upx rgba(0, 0, 0, 0.08);
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10upx;

				.left {
					display: flex;
					height: 100%;
					align-items: center;
					justify-content: flex-start;
					flex-wrap: wrap;

					.name {
						display: inline-flex;
						width: 70%;
						justify-content: space-between;
						font-size: 27upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
					}

					.addr {
						font-size: 27upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						width: 100%;
					}
				}


				image {
					// flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					width: 46upx;
					height: 45upx;

				}

			}

			.car-list {
				width: 100%;
				// height:461px;
				background: rgba(255, 255, 255, 1);
				border-radius: 16upx;
				padding: 0 26upx;
				margin-bottom: 21upx;

				.list-item {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.left {
						width: 34upx;
						margin-right: 24upx;

						image {
							width: 34upx;
							height: 34upx;
						}
					}

					.right {
						flex: 1;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						padding: 32upx 0;
						border-bottom: 2upx solid #EBEBEB;

						.goods-img {
							width: 156upx;
							height: 156upx;
							background: rgba(255, 255, 255, 1);
							border: 1upx solid rgba(217, 217, 217, 1);
							opacity: 0.97;
							border-radius: 2upx;
							margin-right: 31upx;

							image {
								width: 156upx;
								height: 156upx;
							}
						}

						.info {
							flex: 1;
							height: 156upx;

							.name {
								display: flex;
								font-size: 23upx;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(0, 0, 0, 1);
								line-height: 50upx;
							}

							.price {
								display: flex;
								font-size: 33upx;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(240, 64, 111, 1);
								.del{
									text-decoration:line-through ;
									font-size: 24rpx;
									color: #666;
									margin-left: 5rpx;
								}
							}

							.option {
								display: flex;
								font-size: 23upx;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: rgba(93, 93, 93, 1);
								justify-content: space-between;
								margin-top: 30upx;
								.tap{
									display: inline-block;
									vertical-align: middle;
									width:77rpx;
									height:31rpx;
									background:rgba(240,64,111,1);
									border-radius:16rpx;
									text-align: center;
									line-height: 31rpx;
									font-size:22rpx;
									font-family:Microsoft YaHei;
									font-weight:400;
									color:rgba(255,255,255,1);
									margin-right: 10rpx;
								}
								.hui{
									color: #999;
								}
							}
						}

					}

					&:last-child .right {
						border: none;
					}
				}

			}
			.order-info{
				padding:6upx 25upx;
				background: #fff;
				margin-bottom: 10upx;
				.title{
					padding: 19upx 0;
					border-bottom: 2upx solid rgba(68,68,68,0.2);
					text{
						display: block;
						font-size:23upx;
						font-family:Microsoft YaHei;
						font-weight:400;
						color:rgba(102,102,102,1);
						line-height: 40upx;
					}
					
				}
				.detail{
					padding: 26upx 0;
					border-bottom: 2upx solid rgba(68,68,68,0.2);
					.item{
						display: block;
						font-size:23upx;
						font-family:Microsoft YaHei;
						font-weight:400;
						color:rgba(102,102,102,1);
						line-height: 40upx;
						.name{
							display: inline-block;
							width: 92upx;
							margin-right: 77upx;
						}
					}
				}
				.total{
					padding: 33upx 0;
					font-size:23upx;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(240,64,111,1);
					.all{
						display: inline-block;
						width: 92upx;
						margin-right: 55upx;
					}
				}
			}
			.service{
				padding: 35upx 25upx;
				background: #fff;
				.title{
					font-size:27upx;
					font-family:Microsoft YaHei;
					font-weight:400;
					color:rgba(102,102,102,1);
					.time{
						font-size:19upx;
						font-family:Microsoft YaHei;
						font-weight:400;
						color:rgba(102,102,102,1);
						margin-left: 16upx;
					}
				}
				.contact{
					padding: 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 31upx;
					.item{
						width:315upx;
						height:74upx;
						background:rgba(255,255,255,1);
						border:1upx solid rgba(223, 223, 223, 1);
						border-radius:5upx;
						font-size:23upx;
						font-family:Microsoft YaHei;
						font-weight:400;
						color:rgba(102,102,102,1);
						display: flex;
						justify-content: center;
						align-items: center;
						image{
							width:34upx;
							height:36upx;
							margin-right: 15upx;
						}
					}
				}
				
			}
		}

		.footer-btn {
			position: fixed;
			/* left: 30upx; */
			bottom: 0;
			z-index: 95;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 125upx;
			background: #1B1B1B;
			padding: 0 30upx;

			.left {
				width: 43%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.checkall {
					font-size: 31upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					display: flex;
					align-items: center;
				}

				.freight {
					font-size: 22upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(136, 136, 136, 1);
				}

			}

			.right {
				width: 57%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.total {
					font-size: 33upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					white-space: nowrap;

					.price {
						font-size: 33upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(240, 64, 111, 1);
						.del{
							text-decoration:line-through ;
							font-size: 24rpx;
							color: #666;
						}
					}
				}

				.settlement {
					padding: 14upx 30upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 31upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					background: rgba(240, 64, 111, 1);
					border-radius: 29upx;
					color: rgba(255, 255, 255, 1);
					white-space: nowrap;

				}
			}

		}
	}
</style>
